<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <script src="../js/libs/jquery.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
    <script src="../bootstrap/jquery-3.4.1.slim.min.js"></script>
    <script src="../bootstrap/popper.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../fontawesome/all.min.js"></script>
    <link rel="stylesheet" href="../fontawesome/all.min.css" />
    <link rel="stylesheet" href="../fontawesome/fontawesome.min.css" />
    <link rel="stylesheet" href="../css/signupPage.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript">
      $("button").click(function(){
        $.ajax({
          url:"/register",
          data:{name:$("#name").val(),email:$("#email"),pwd:$("#pwd").val()},
          type:"post",
          success(date){
            //根据后台返回的数据，在前台页面显示相应的效果
            if(date.status==200 && date.content==1){
              alert("注册成功");
              window.location.href="loginPage.html"
              // var i=5;
              // //注册成功，倒计时之后跳转页面
              // setInterval(function(){
              //   i--;
              //   if(i==0){
              //     window.location.href="/loginPage.html"
              //     return
              //   }
              //   var newHtml="<p>"+i+"秒后自动跳转到登陆页面</p>";
              //   $(".box").html(newHtml);
              //
              // },1000)
            }else if(date.status==500 && date.content==0){
              alert("账户已存在，请重新输入")
            }else if(date.status==500 && date.content==2){
              alert("注册失败")
            }
          }
        })
      })
    </script>
  </head>
  <body>
    <div class="container-form">
      <img src="../images/login/login.svg" alt="" class="svg">
      <form>
        <li><img src="../images/login/user.png" alt="" /></li>
        <div class="user-name">
          <i class="fas fa-user"></i>
          <input type="text" name="name" id="name" required />
        </div>
        <div class="user-email">
          <i class="fas fa-envelope-open"></i>
          <input type="email" name="email" id="email" required />
        </div>
        <div class="user-password">
          <i class="fas fa-lock"></i>
          <input
            type="password"
            name="password"
            id="pwd password"
            class="pwd"
            required
          />
          <i
            class="far fa-eye"
            onclick="showHidePwd()"
            style="cursor: pointer;"
          ></i>
        </div>
        <div class="user-password">
          <i class="fas fa-lock"></i>
          <input
            type="password"
            name="password"
            id="cpwd"
            class="pwd"
            required
          />
          <i
            class="far fa-eye"
            onclick="showHidePwd()"
            style="cursor: pointer;"
          ></i>
        </div>
        <input type="checkbox" name="checkbox" id="tndc" required />
        <span>Terms and Contitions</span>
        <br />

        <button type="button" onclick="submitUserData();" id="register">
          <a href="/views/loginPage.html" style="text-decoration: none;">Sign Up </a><i class="fas fa-user-plus"></i>
        </button>
      </form>
    </div>
    <div class="error-block">
      <h3>Please check the password not same. give same password.</h3>
    </div>
    <script src="../js/logFiles/signUp.js"></script>
  </body>
</html>
